<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-09-24 17:12:26
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-06 09:58:41
 * @FilePath: /vue3-datav/src/views/auth/login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import SvgIcon from '@/components/ui/SvgIcon.vue';
import { loginRules } from '@/utils/rules/loginRules';
import { reactive, ref } from 'vue';
import { getCodeImg } from '@/api/login';
import Cookie from 'js-cookie';
import { encrypt } from '@/utils/encrypt';
import { useUserStore } from '@/stores/user';
import { useRouter, useRoute } from 'vue-router';
import type { FormInstance } from 'element-plus';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const loginModel = reactive({
    username: '',
    password: '',
    rememberMe: false,
    code: '',
    uuid: ''
});
const needCaptcha = true;
const isLoading = ref(false);
let captchaHtml = ref('');
// ElBreadcrumbItem
const formView = ref<FormInstance | null>(null);
const getCaptcha = () => {
    getCodeImg().then((res) => {
        captchaHtml.value = res;
    });
};
const handleLogin = () => {
    formView.value &&
        formView.value.validate((valid): void => {
            if (valid) {
                isLoading.value = true;
                if (loginModel.rememberMe) {
                    Cookie.set('username', loginModel.username, {
                        expires: 30
                    });
                    Cookie.set('password', encrypt(loginModel.password) || '', {
                        expires: 30
                    });
                    Cookie.set('rememberMe', loginModel.rememberMe.toString(), {
                        expires: 30
                    });
                } else {
                    Cookie.remove('username');
                    Cookie.remove('password');
                    Cookie.remove('rememberMe');
                }
                userStore
                    .login(loginModel)
                    .then(() => {
                        userStore.getUserInfo();
                        router.push({
                            path: (route.query.redirect as string) || '/'
                        });
                    })
                    .catch((err) => {
                        console.log(err);
                        if (needCaptcha) {
                            getCaptcha();
                        }
                    })
                    .finally(() => {
                        isLoading.value = false;
                    });
            }
        });
};
const getCookie = () => {
    const username = Cookie.get('username');
    const password = Cookie.get('password');
    const rememberMe = Cookie.get('rememberMe');
    username !== undefined && (loginModel.username = username);
    password !== undefined && (loginModel.password = password);
    rememberMe !== undefined && (loginModel.rememberMe = rememberMe === 'true');
};
getCaptcha();
getCookie();
</script>

<template>
    <div class="login-container">
        <ElForm
            ref="formView"
            :model="loginModel"
            :rules="loginRules"
            class="form-box"
        >
            <h3 class="title">智慧园区综合平台</h3>
            <ElFormItem prop="username">
                <ElInput
                    v-model="loginModel.username"
                    type="text"
                    auto-complete="off"
                    placeholder="账号"
                >
                    <template v-slot:prefix>
                        <SvgIcon name="user" class="input-icon"></SvgIcon>
                    </template>
                </ElInput>
            </ElFormItem>
            <ElFormItem prop="password">
                <ElInput
                    v-model="loginModel.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter="handleLogin"
                >
                    <template v-slot:prefix>
                        <SvgIcon name="password" class="input-icon"></SvgIcon>
                    </template>
                </ElInput>
            </ElFormItem>
            <ElFormItem prop="code" v-if="needCaptcha">
                <ElInput
                    v-model="loginModel.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%"
                    @keyup.enter="handleLogin"
                >
                    <template v-slot:prefix>
                        <SvgIcon name="validCode" class="input-icon"></SvgIcon>
                    </template>
                </ElInput>
                <div class="captcha">
                    <div
                        v-html="captchaHtml"
                        @click="getCaptcha"
                        class="login-code-img"
                    ></div>
                </div>
            </ElFormItem>
            <ElCheckbox
                v-model="loginModel.rememberMe"
                style="margin: 0px 0px 25px 0px"
                >记住密码
            </ElCheckbox>
            <ElFormItem style="width: 100%">
                <ElButton
                    :loading="isLoading"
                    size="default"
                    type="primary"
                    style="width: 100%"
                    @click.prevent="handleLogin"
                >
                    <span v-if="!isLoading">登 录</span>
                    <span v-else>登 录 中...</span>
                </ElButton>
            </ElFormItem>
        </ElForm>
        <!--  底部  -->
        <!-- <div class="footer-box">
            <span>Copyright © 2018-2021 城视科技 All Rights Reserved.</span>
        </div> -->
    </div>
</template>

<style lang="scss" scoped>
.login-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;
    .form-box {
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        padding: 25px 25px 5px 25px;
        margin-right: 200px;
        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #707070;
        }
        .captcha {
            width: 33%;
            height: 38px;
            float: right;

            img {
                cursor: pointer;
                vertical-align: middle;
            }
        }
        .el-input {
            height: 38px;

            input {
                height: 38px;
            }
        }

        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
        }
    }
    .footer-box {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
}
.login-code-img {
    height: 38px;
    > * {
        width: 100%;
        height: 100%;
    }
}
</style>
